Binary images can be displayed inside a grid by adding a BinaryImage control to a template field in the GridView control. This topic shows how to integrate BinaryImage control into GridView control to display images stored as binary images, in data binding scenarios. The ImageData property is used to add the image from the database to the BinaryImage control.

In the Designer

Complete the following steps:

1. In Visual Studio, create a new ASP.Net WebApplication and add a new Web Form.
2. In the ToolBox, locate the C1GridView control and drag it onto the Web Form.
3. Click the C1GridView Smart Tag  and select <New data source...> from the Choose Data Source drop down list. This will open the Data Source Configuration Wizard. Select SQL Database and click OK. This will open the Configure Data Source dialog box.
4. In the Configure Data Source dialog box, click New Connection. This will open the Add Connection dialog box. Change the DataSource to Microsoft Access Database File (OLE DB) and select C1NWind in the Database file name. Click OK.
5. Click Next. Save the connection and click Next. Specify the columns to add to the C1GridView and click Next. Test Query and click Finish.

In Source View

Replace the <cc1:C1BoundField DataField="Picture" HeaderText="Picture" SortExpression="Picture">
</cc1:C1BoundField> tags, within the <Columns></Columns> tags with the following <cc1:C1TemplateField> markup:

<cc1:C1TemplateField HeaderText="Picture">
            <ItemTemplate>
                <cc1:C1BinaryImage ID="C1BinaryImage1" runat="server" ImageData='<%# Eval("Picture") %>' />
            </ItemTemplate>
        </cc1:C1TemplateField>

Following is the final markup for <cc1:C1GridView>:

<cc1:C1GridView ID="C1GridView1" runat="server" AutogenerateColumns="False" DataKeyNames="CategoryID" DataSourceID="SqlDataSource1">
       <Columns>
           <cc1:C1BoundField DataField="CategoryID" HeaderText="CategoryID" ReadOnly="True" SortExpression="CategoryID">
           </cc1:C1BoundField>
           <cc1:C1BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName">
           </cc1:C1BoundField>
           <cc1:C1BoundField DataField="Description" HeaderText="Description" SortExpression="Description">
           </cc1:C1BoundField>
         <cc1:C1TemplateField HeaderText="Picture">
               <ItemTemplate>
                   <cc1:C1BinaryImage ID="C1BinaryImage1" runat="server" ImageData='<%# Eval("Picture") %>' />
               </ItemTemplate>
           </cc1:C1TemplateField>
       </Columns>
   </cc1:C1GridView>

What You've Accomplished

The images are displayed with the BinaryImage control integrated into the C1GridView control, as shown in the image below: